// import React from 'react';

// interface P {
//   source: string | null;
//   pause?: boolean;
//   styles?: object;
// }

// class VideoPlayer extends React.Component<P> {
//   state = {

//   };

//   player: any;

//   componentDidMount() {
//     this.player = window.videojs(this.videoNode);

//     this.player.on('pause', () => {
//       // eslint-disable-next-line
//       console.log(this.player.waiting)
//     })
//   }
//   videoNode(videoNode: any): any {
//     throw new Error("Method not implemented.");
//   }

//   UNSAFE_componentWillReceiveProps(nextProps) {
//     if (nextProps.source !== this.props.source) {
//       this.player.src({ src: nextProps.source, type: "application/x-mpegURL"});
//       this.player.load(nextProps.source)
//     }
//     if (nextProps.pause !== this.props.pause) {
//       if (this.player !== undefined) {
//         if (nextProps.pause === 1) {
//           this.player.player_.pause()
//         } else {
//           this.player.player_.play()
//         }
//       }
//     }
//   }

//   // destroy player on unmount
//   componentWillUnmount() {
//     if (this.player && this.player.player_) {
//       this.player.player_.dispose()
//     }
//   }

//   render() {
//     const { source, styles, ...res } = this.props;

//     return (
//       <div data-vjs-player style={{width: '100%', height: '100%'}}>
//         <video
//           ref={(node: any) => this.videoNode = node}
//           id="really-cool-video"
//           className="video-js vjs-default-skin"
//           {...res}
//           style={{width: '100%', height: '100%'}}
//         >
//           <source
//             src={source}
//             type="application/x-mpegURL"
//           />
//         </video>
//       </div>
//     )
//   }
// }

// export default VideoPlayer;


import React, { Component } from 'react'
import ReactPlayer from 'react-player'

import styles from './style.less'

interface P {
  url: string | null;
  poster?: string;
}

class ResponsivePlayer extends Component<P> {

  player: any

  ref = player => {
    this.player = player
  }

  render() {

    return (
      <div className={styles['player-wrapper']}>
        <ReactPlayer
          className={styles['react-player']}
          autoplay
          url={this.props.url}
          width='100%'
          height='100%'
          controls
          playing
          ref={this.ref}
          fileConfig={{ attributes: { poster: this.props.poster } }}
          config={{ file: { forceHLS: true } }}
        />
      </div>
    )
  }

}

export default ResponsivePlayer;